<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="header::header"></head>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit"/>
    <meta name="renderer" content="ie-comp"/>
    <meta name="renderer" content="ie-stand"/>
    <title>普惠商城-个人中心-订单中心-线上订单-订单详情</title>
    <!-- 个人中心通用样式personal.css -->
    <link rel="stylesheet" th:href="@{/css/personal-order-detail.css}"/>
</head>
<body>
<div th:include="commonfragment::order-top-search-nav"></div>
<!--个人中心中间主体框架  -->
<div class="centerbody personal_middle">
    <!-- 左侧通用导航栏 -->
    <div class="personal_middle_nav" th:include="commonfragment::order-left-menu-nav"></div>
    <div class="centerbody personal_middle_main">
        <div class="personal_middle_main_tit">
            <span>订单中心</span>><span>线上订单</span>><span th:text="${orderDetail.orderNo}"></span>
        </div>
        <div class="personal_middle_main_box box1">
            <div class="box_tit order_info">订单信息</div>
            <div class="order_info_left">
                <div class="goods_info_check" style="width:360px;margin-top: 0;">
                    <ul style="margin-top: 0; margin-left: 0;">
                        <th:block th:object="${orderDetail}">
                            <li>
                                <span class="goods_info_check_name" style="width: 56px;margin-left: 25px;">订单号</span>：
                                <span class="goods_info_check_price" th:text="*{orderNo}"></span>
                            </li>
                            <li>
                                <span class="goods_info_check_name" style="width: 56px;margin-left: 25px;">收货人</span>：
                                <span class="goods_info_check_price" th:text="*{contact}"></span>
                            </li>
                            <li>
                                <span class="goods_info_check_name" style="width: 56px;margin-left: 25px;">手机号码</span>：
                                <span class="goods_info_check_price" th:text="*{telPhone}"></span>
                            </li>
                            <li>
                                <span class="goods_info_check_name" style="width: 56px;margin-left: 25px;">收货地址</span>：
                                <span class="goods_info_check_price address_info" th:text="*{addressDetail}"></span>
                            </li>
                        </th:block>
                    </ul>
                </div>
            </div>
            <div class="order_info_right">
                <th:block th:object="${orderDetail}">
                    <p>订单状态：
                        <span th:if="*{status}==1">待付款</span>
                        <span th:if="*{status}==2">待发货</span>
                        <span th:if="*{status}==3">待收货</span>
                        <span th:if="*{status}==4">已完成</span>
                        <span th:if="*{status}==5">交易关闭</span>
                        <span th:if="*{status}==6">退款中</span>
                        <span th:if="*{status}==7">已退货</span>
                    </p>
                    <p>
                        <a th:if="*{status}==1" th:onclick="'toPay(\''+*{id}+'\',\''+*{orderNo}+'\',\''+*{deliveryType}+'\',\''+*{payMoney}+'\');'">
                            <input type="button" class="paybutton choose" value="立即付款">
                        </a>
                        <a th:if="*{status}==1" class="cancel_order" th:value="*{orderNo}" href="javascript:void(0)"><input type="button" class="paybutton" value="取消订单"></a>
                        <a th:if="*{status}==3" class="confirm_order" th:value="*{orderNo}" href="javascript:void(0)"><input type="button" class="paybutton" value="确认收货"></a>
                    </p>
                </th:block>
            </div>
            <div style="clear:both;"></div>
        </div>
        <div class="personal_middle_main_box box2">
            <div class="box_tit order_track">订单追踪</div>
            <div class="order_track_track_ico">
                <ul>
                    <li>
                        <img th:if="${orderDetail.payDate}==null" src="../../images/step-2.png" alt="" class="step">
                        <img th:if="${orderDetail.payDate}!=null" src="../../images/step-1.png" alt="" class="step">
                    </li>
                    <li>
                        <img th:if="${orderDetail.payDate}!=null and ${orderDetail.sendDate}==null" src="../../images/step-2.png" alt="" class="step">
                        <img th:if="${orderDetail.sendDate}!=null" src="../../images/step-1.png" alt="" class="step">
                    </li>
                    <li>
                        <img th:if="${orderDetail.sendDate}!=null and ${orderDetail.acceptDate}==null" src="../../images/step-2.png" alt="" class="step">
                        <img th:if="${orderDetail.acceptDate}!=null" src="../../images/step-1.png" alt="" class="step">
                    </li>
                    <li>
                        <img th:if="${orderDetail.acceptDate}!=null" src="../../images/step-2.png" alt="" class="step">
                    </li>
                </ul>
                <ul style="background: none;width:900px;margin-top:0;margin-left: 125px;">
                    <li>
                        <p>提交订单</p>
                        <p th:text="${#dates.format(orderDetail.deliveryDate,'yy-MM-dd HH:mm:ss')}"></p>
                    </li>
                    <li>
                        <p>付款成功</p>
                        <p th:text="${#dates.format(orderDetail.payDate,'yy-MM-dd HH:mm:ss')}"></p>
                    </li>
                    <li>
                        <p>商品发货</p>
                        <p th:text="${#dates.format(orderDetail.sendDate,'yy-MM-dd HH:mm:ss')}"></p>
                    </li>
                    <li>
                        <p>收货完成</p>
                        <p th:text="${#dates.format(orderDetail.acceptDate,'yy-MM-dd HH:mm:ss')}"></p>
                    </li>
                </ul>
            </div>
            <div class="order_track_track_info">
                <div class="order_info_left" style="margin-top: 17px;width: 218px;">
                    <div class="goods_info_check" style="width:360px;margin-top: 0px;">
                        <ul style="margin-top: 0; margin-left: 0;">
                            <li>
                                <span class="goods_info_check_name" style="width: 56px;margin-left: 25px;">配送方式</span>：
                                <span class="goods_info_check_price" th:text="${orderDetail.deliveryType ==1?'送货到家':'自提商品'}"></span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div style="clear:both;"></div>
            </div>
        </div>
        <div class="personal_middle_main_box box3">
            <div class="box_tit">商品清单</div>
            <form action="">
                <div class="goods_info">
                    <div class="goods_info_box">
                        <div class="box_tit_list">
                            <span>商品</span>
                            <span>单价</span>
                            <span>商品数量</span>
                            <span>运费</span>
                            <span>总额</span>
                            <div style="clear: both;"></div>
                        </div>
                        <div>
                            <div class="box_big">
                                <div class="box_big_detail">
                                    <img th:src="@{${orderDetail.url}}" alt="" class="box_big_detail_img">
                                    <p class="box_big_detail_info" th:text="${orderDetail.productName}"></p>
                                    <div style="clear: both;"></div>
                                </div>

                                <span class="box_small" th:text="${'¥'+orderDetail.price}"></span>
                                <span class="box_small" th:text="${orderDetail.num}"></span>
                                <span class="box_small" th:text="${'¥'+orderDetail.price*orderDetail.num}"></span>
                                <span class="box_small" th:text="${'¥'+orderDetail.payMoney}"></span>
                            </div>
                        </div>
                    </div>
                    <div class="goods_info_check">
                        <ul style="width: 200px;">
                            <li>
                                <span class="goods_info_check_name">商品总额</span>：
                                <span class="goods_info_check_price" th:text="${'¥'+orderDetail.price*orderDetail.num}"></span>
                            </li>
                            <li>
                                <span class="goods_info_check_name">运费</span>：
                                <span class="goods_info_check_price" th:text="${'¥'+orderDetail.postage}"></span>
                            </li>
                            <li>
                                <span class="goods_info_check_name">应付总额</span>：
                                <span class="goods_info_check_price" th:text="${'¥'+orderDetail.payMoney}"></span></li>
                            <li>
                                <span class="goods_info_check_name">可获得待用积分</span>：
                                <span class="goods_info_check_price" th:text="${orderDetail.payMoney}"></span>
                            </li>
                        </ul>
                    </div>
                </div>


            </form>
        </div>
    </div>
    <div style="clear:both;"></div>
</div>

<!-- 页面底部 -->
<div th:include="footer::footer"></div>
<div class="login_box_2 order_cancel">
    <form action="">
        <div class="cancel_order_box">
            <p class="cancel_order_txt">是否要取消该订单？</p>
            <p style="margin-left: 49px;">
                <input type="button" class="cancel_order_btn" id="close_order" value="是" style="font-size: 14px;">
                <input type="button" class="cancel_order_btn cancel_btn" value="否" style="font-size: 14px;">
            </p>
        </div>
    </form>
</div>

<div class="shadow">
</div>
<div class="login_box_2 order_confirm">
    <form action="">
        <div class="cancel_order_box">
            <p class="cancel_order_txt">是否要确认收货？</p>
            <p style="margin-left: 49px;">
                <input type="button" class="cancel_order_btn" id="receipt_order" value="是" style="font-size: 14px;">
                <input type="button" class="cancel_order_btn cancel_btn" value="否" style="font-size: 14px;">
            </p>
        </div>
    </form>
</div>
</body>
<script type="text/javascript">
    function toPay(orderId, orderNo, deliveryType, payMoney) {
        Common.generateAutoSubmitForm({
            url: "/shopping/order/orderOnlinePay",
            data: {
                orderId: orderId,
                orderNo: orderNo,
                payMoney: payMoney,
                deliveryType: deliveryType
            }
        });
    }

    $(function () {
        $(".box1 input:checked").parent().parent().addClass("selected");
        $(".box1 input").change(function () {
            $(".box1 input:checked").parent().parent().addClass("selected").siblings().removeClass("selected");
        });
        $('input.paybutton').eq(0).addClass('choose');

        $('input.paybutton').hover(function () {
            $(this).addClass('choose');
            $(this).siblings().removeClass('choose');
        }, function () {
            $(this).removeClass('choose');
        });
        $('.cancel_small').click(function () {
            $('.shadow').css('display', 'none');
            $('.login_box_2').css('display', 'none');
        });

        $('.add_info').click(function () {
            $('.shadow').css('display', 'block');
            $('.login_box_2').css('display', 'block');
        });
        $('.shadow').css('height', $(window).height());
        $('.login_box_2').css('top', ($(window).height() - $('.login_box_2').height()) / 2);
        $('.login_box_2').css('left', ($(window).width() - $('.login_box_2').width()) / 2);
        $(window).resize(function () {
            $('.shadow').css('height', $(window).height());
            $('.login_box_2').css('top', ($(window).height() - $('.login_box_2').height()) / 2);
            $('.login_box_2').css('left', ($(window).width() - $('.login_box_2').width()) / 2);
        });

        $('.order_cancel').css('top', ($(window).height() - $('.order_cancel').height()) / 2);
        $('.order_cancel').css('left', ($(window).width() - $('.order_cancel').width()) / 2);
        $(window).resize(function () {
            $('.shadow').css('height', $(window).height());
            $('.order_cancel').css('top', ($(window).height() - $('.order_cancel').height()) / 2);
            $('.order_cancel').css('left', ($(window).width() - $('.order_cancel').width()) / 2);
        });

        $('.cancel_order').click(function () {
            $('.shadow').css('display', 'block');
            $('.order_cancel').css('display', 'block');
            //增加取消订单id
            $("#close_order").attr("close_order_id", $(this).attr("value"));
        });

        $('.confirm_order').click(function () {
            $('.shadow').css('display', 'block');
            $('.order_confirm').css('display', 'block');
            //增加收货订单id
            $("#receipt_order").attr("receipt_order_id", $(this).attr("value"));
        });

        $('.cancel_btn').click(function () {
            $('.shadow').css('display', 'none');
            $('.login_box_2').css('display', 'none');
            $('.refundBox').css('display', 'none');
        });

        //绑定取消订单事件
        $("#close_order").click(function () {
            var close_order_id = $(this).attr("close_order_id");
            $.post("/shopping/order/updateOnlineOrder", {orderId: close_order_id, status: 5}, function () {
                Common.generateAutoSubmitForm({
                    url: "/shopping/order/getOrderDetail",
                    data: {
                        orderId: [[${orderDetail.id}]],
                        deliveryType: [[${orderDetail.deliveryType}]]
                    }
                });
            });
        });

        //绑定订单收货事件
        $("#receipt_order").click(function () {
            var receipt_order_id = $(this).attr("receipt_order_id");
            $.post("/shopping/order/updateOnlineOrder", {orderId: receipt_order_id, status: 4}, function () {
                Common.generateAutoSubmitForm({
                    url: "/shopping/order/getOrderDetail",
                    data: {
                        orderId: [[${orderDetail.id}]],
                        deliveryType: [[${orderDetail.deliveryType}]]
                    }
                });
            });
        });
    })
</script>
}

</html>